<template>
<div>
    <Row type="flex" justify="start" class="code-row-bg">
        <Col  span="2"><Button  style="width:80%" size="small" type="primary"  @click="handleSubmit(0)">全部</Button>
        </Col>
        <Col  span="2"><Button  style="width:80%" size="small" type="primary" @click="handleSubmit(1)" >未处理</Button>
        </Col>
        <Col  span="2"><Button  style="width:80%" size="small" type="primary" @click="handleSubmit(2)" >已处理</Button>
        </Col>
    </Row>  
    <Table border stripe :columns="columns1" :data="feedbacklist" style="margin-top:8px;width:100%" ></Table>
    <AutoPage v-model="page"></AutoPage>
    <Modal v-model="modal1" width="600" ref="detail_feedback" :mask-closable="false" :scrollable="false" >
        <p slot="header" style="color:#2b85e4;text-align:center">
            <Icon type="email"></Icon>
            <span>反馈详情</span>
        </p>
        <div style="font-size:15px; padding-left:8%" class="sheet">
           <table style="">
               <tr><td style="width:16%">反馈人:</td> <td>{{current.name}}</td></tr>
               <tr><td>email:  </td> <td>{{current.email}}</td></tr>
               <tr><td>联系方式:</td> <td>{{current.phone}}</td></tr>
               <tr><td>反馈状态:</td> <td>{{current.status == 1 ? '未处理' : '已处理'}}</td></tr>
               <tr><td>反馈时间:</td> <td>{{current.create_time == "" ? '空' : new Date(parseInt(current.create_time)).toLocaleString()}}</td></tr>
               <tr><td>处理时间:</td> <td>{{current.disposs_time == "" ? '空':new Date(parseInt(current.disposs_time)).toLocaleString()}}</td></tr>
               <tr><td>反馈内容:</td> <td>{{current.content}}</td></tr>
           </table>
        </div>
        <div slot="footer" style="text-align:center">
            <span v-if="current.status == 1"><Button  type="warning"  @click="handleClick" style="width:20%;">标记为已处理</Button></span>
            <Button type="warning"  @click="deleteClick" style="width:20%" >删除反馈</Button>
        </div>
    </Modal>
</div>
</template>

<script>
import Page from "@/common/model/Page";
import AutoPage from "@/common/components/AutoPage";
import parent from "../Parent";
export default {
    extends:parent,
    components: {
        AutoPage
    },
    data () {
        return {
            current: {},
            modal1: false,
            page: new Page("feedback/search", {status:0}),
            columns1: [
                {
                    title: '反馈人',
                    width:100,
                    key: 'name'
                },
                { 
                    title: '反馈内容',
                    render: (h, params) => {
                    var len = Math.min(30, params.row.content.length);
                        return h('div', params.row.content.substring(0, len));
                    }
                },
                {
                    title: '反馈时间',width:150,
                    render: (h, params) => {
                        return h('div', new Date(parseInt(params.row.create_time)).toLocaleDateString()+" "+new Date(parseInt(params.row.create_time)).getHours()+":"+new Date(parseInt(params.row.create_time)).getMinutes());
                    }
                },
                {
                    title: '处理时间',width:150,
                    render:(h,params) =>{
                        return h('div',params.row.status == 1 ? '无':new Date(parseInt(params.row.disposs_time)).toLocaleDateString()+" "+new Date(parseInt(params.row.disposs_time)).getHours()+":"+new Date(parseInt(params.row.disposs_time)).getMinutes());
                    }
                },
                {
                    title: '处理人',
                    width:100,
                    render:(h,params) =>{
                        return h('div',params.row.status == 1 ? '无':params.row.processor);
                    }
                },
                {
                    title: '操作',                  
                    align: 'center',
                    width: 250,
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px',display:this.showButton("112314")
                                },
                                on: {
                                    click: () => {
                                        this.show(params.index)
                                    }
                                }
                            }, '详情'),
                                h('Button',{
                                props:{
                                    type:'warning',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px',display:this.showButton("112312")
                                },
                                on:{
                                    click: () =>{
                                        this.delete(params.index)
                                    }
                                }
                            },'删除'),
                                h('Button', {
                                props: {
                                    type: params.row.status == 1 ? 'error' : 'success',
                                    size: 'small'
                                },
                                style:{display:this.showButton("112330")},
                                on: {
                                    click: () => {
                                        this.handle(params.index)
                                    }
                                }
                            }, params.row.status == 1 ? '标记为处理' : '处理已完成')
                        ]);
                        }
                    }
            ]
        }
    },
    computed:{
        feedbacklist(){
            return this.page.list; //表格所显示的数据
        }
    },
    methods:{
        //根据data显示当前页面的反馈内容：0为全部，1为未处理，2为已处理
        handleSubmit (data) {
            this.page.action_data.status = data; 
            this.page.getData();                               
        },
        //显示反馈详情
        show (index) {
            this.modal1 = true;
            this.current = this.feedbacklist[index];
            console.log(this.current);
        },
        //删除反馈
        delete(index){
            this.current = this.feedbacklist[index];
            this.deleteClick();
        },
         deleteClick () {
            this.$Modal.confirm({
                    title: '是否继续删除（不可恢复）',
                    content: '<p>继续进行，请点击确定按钮</p><br><p>取消，请点击取消按钮</p>',
                    onOk: () => {
                        this.api.post("feedback/delete",{ id: this.current.id}, res =>{
                        this.$CustomMessage.success('删除成功!');
                        this.$refs["detail_feedback"].visible = false;
                        this.page.getData();
                        });
                    },
                    onCancel: () => {
                        this.$CustomMessage.info('取消处理');
                    }
            });     
        },
        //反馈列表中处理反馈
        handle(index) {
            this.current = this.feedbacklist[index];
            this.handleClick();
        },
        //反馈详情中处理反馈
        handleClick () {
            this.$Modal.confirm({
                    title: '请确认您的操作',
                    content: '<p>继续进行，请点击确定按钮</p><br><p>取消，请点击取消按钮</p>',
                    onOk: () => {
                        if(this.current.status == 1)
                        {
                            this.api.post("feedback/watched", { id: this.current.id } ,res => {
                                this.current.status = res.value;
                                this.current.disposs_time = res.disposs_time;
                                this.modal1 = false;
                                this.page.getData();
                            });
                        }
                        else
                        {
                            this.$Notice.error({
                                title: '处理失败',
                                desc: '该条反馈已处理，请勿重复处理！.'});                       
                        }
                    },
                    onCancel: () => {
                        this.$CustomMessage.info('取消处理');
                    }
            });     
        }       
    },
    created() {
        var status = this.$route.query.status || '0';

        this.handleSubmit(status);
    }  
}
</script>

<style>
.sheet table {
    font-family: Verdana;
    font-weight: bold;  
    border-width: 1px;
    border-collapse: collapse;
  }
.sheet table tr {
    border-bottom-width: 0;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(81, 130, 187);
}
.sheet table td {
    border-right: solid 1px rgb(81, 130, 187);
    padding: 5px 10px;
    font-size: 13px;  
}
</style>